<template>
  <div class="uploader-panel">
    <div class="uploader-title">
      <span>上传任务</span>
      <span class="tips">（仅展示本次上传任务）</span>
    </div>
    <div class="file-list">
        <div v-for="(item,index) in fileList" class="file-item">
          <div class="uploader-panel">
            <div class="file-name">
              {{item.fileName}}
            </div>
            <div class="progress">
              <el-progress
                :percentage="item.uploadProgress"
                v-if="item.status===STATUS.uploading.value ||
                      item.status===STATUS.upload_seconds.value ||
                      item.status===STATUS.upload_finish.value"
              >
              </el-progress>
            </div>
            <div class="upload-status">
              <!--图标-->
              <span
                  :class="['iconfont','icon-'+ STATUS[item.status].icon]"
                  :style="{color:STATUS[item.status].color}"
              ></span>
              <!--状态描述-->
              <span
                class="status"
                :style="{color:STATUS[item.status].color}"
              >
                {{item.status==="fail"?item.errorMsg : STATUS[item.status].desc}}
              </span>
              <!--上传中-->
              <span
                  class="upload-info"
                  v-if="item.status===STATUS.uploading.value"
              >
                {{formatFileSize(item.uploadSize)}} / {{
                  formatFileSize(item.totalSize)}}
              </span>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script setup>

import {getCurrentInstance, onMounted, ref} from "vue";
import eventBus from "@/utils/eventBus.js";

const proxy=getCurrentInstance();
const STATUS={
  emptyFile:{
    value:"emptyFile",
    desc:"文件为空",
    color:"#F75000",
    icon:'close',
  },
  fail:{
    value:"fail",
    desc:"上传失败",
    color:"#F75000",
    icon:'clock'
  },
  init:{
    value:"init",
    desc:"解析中",
    color:"#e6a23c",
    icon:'clock'
  },
  uploading:{
    value:"uploading",
    desc:"上传中",
    color:"#409eff",
    icon:'upload'
  },
  upload_finish:{
    value:"upload_finish",
    desc:"上传完成",
    color:"#67c23a",
    icon:'ok'
  },
  upload_seconds:{
    value:"upload_seconds",
    desc:"妙传",
    color:"#67c23a",
    icon:'ok'
  },
}

const formatFileSize = (size) => {
  if(size<=0) return '-';
  if (size < 1024) return `${size} B`;
  if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
  if (size < 1024 * 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(2)} MB`;
  return `${(size / (1024 * 1024 * 1024)).toFixed(2)} GB`;
};
const fileList=ref([]);
const addFile=(file,filePid)=>{
  const fileItem={
    //文件
    file:file,
    //文件UID
    uid:file.uid,
    //md5进度
    md5Progress:0,
    //MD5值
    md5:null,
    //文件名
    fileName:file.name,
    //上传状态
    status:STATUS.uploading.value,
    //已上传大小
    uploadSize:0,
    //文件总大小
    totalSize:file.size,
    //上传进度
    uploadProgress:0,
    //暂停
    pause:false,
    //当前分片
    chunkIndex:0,
    //文件父级ID
    filePid:filePid,
    //错误信息
    errorMsg:null,
  };
  fileList.value.unshift(fileItem);
  console.log("上传文件列表",fileList.value)
}
onMounted(()=>{
  eventBus.on('file-added', addFile);
})
</script>

<style scoped lang="scss">
.uploader-panel{
  width:100%;
  .uploader-title{
    border-bottom: 1px solid #ddd;
    line-height: 40px;
    padding:0 10px;
    font-size:15px;
    .tips{
      font-size:13px;
      color:rgb(169,169,169);
    }
  }
  .file-list{
    overflow:auto;
    padding:10px 0;
    min-height: calc(100vh / 2);
    max-height:calc(100vh - 120px);
    .file-item{
      position:relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding:3px 10px;
      background-color: #fff;
      border-bottom: 1px solid #ddd;
    }
    .file-item:nth-child(even){
      background-color: #fcf8f4;
    }
    .upload-panel{
      flex:1;
      .file-name{
        color:rgb(64,62,62);
      }
      .upload-status{
        display: flex;
        align-items: center;
        margin-top:5px;
        .iconfont{
          margin-right:3px;
        }
        .status{
          color:red;
          font-size: 13px;
        }
        .upload-info{
          margin-left:5px;
          font-size:12px;
          color:rgb(112,111,111);
        }
      }
      .progress{
        height:10px;
      }
    }
    .op{
      width:100px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .op-btn{
        .btn-item{
          cursor: pointer;
        }
        .del,
        .clean{
          margin-left: 5px;
        }
      }
    }
  }
}
</style>